<template>
  <div class="playground">
    <GameMap></GameMap>
  </div>
  <div class="player-info player1">
    <img :src="player1Photo" alt="Player 1" class="avatar">
    <span class="username">{{ player1Name }} ({{ player1Color }})</span>
  </div>
  <div class="player-info player2">
    <img :src="player2Photo" alt="Player 2" class="avatar">
    <span class="username">{{ player2Name }} ({{ player2Color }})</span>
  </div>
  <div class="controls" v-if="$store.state.record.is_record">
    <button @click="exit" class="exit">退出</button>
    <button @click="previousStep">上一步</button>
    <button @click="nextStep">下一步</button>
    <button @click="autoPlay">{{ autoPlaying ? '关闭自动' : '自动' }}</button>
  </div>
</template>

<script>
import GameMap from './GameMap.vue';
import {computed, onUnmounted, ref} from 'vue';
import { useStore } from 'vuex';
import router from "@/router";

export default {
  components: {
    GameMap,
  },
  setup() {
    const store = useStore();
    const autoPlaying = ref(false);
    let intervalId = null;
    // 获取用户信息
    const isReplay = computed(() => store.state.record.is_record);

    const player1Photo = computed(() => {
      return isReplay.value ? store.state.record.user1Photo : store.state.user.photo;
    });

    const player1Name = computed(() => {
      return isReplay.value ? store.state.record.user1Name : store.state.user.username;
    });

    const player1Color = computed(() => {
      return isReplay.value ? "黑" : (store.state.pk.iAmBlack ? "黑" : "白");
    });

    const player2Photo = computed(() => {
      return isReplay.value ? store.state.record.user2Photo : store.state.pk.opponentPhoto;
    });

    const player2Name = computed(() => {
      return isReplay.value ? store.state.record.user2Name : store.state.pk.opponentUsername;
    });

    const player2Color = computed(() => {
      return isReplay.value ? "白" : (store.state.pk.iAmBlack ? "白" : "黑");
    });

    // 函数留空，具体逻辑待实现
    const previousStep = () => {
      store.state.pk.gameObject.updateStep(0);
    };
    const nextStep = () => {
      store.state.pk.gameObject.updateStep(1);
    };
    const exit = () => {
      store.commit("clearRecords");
      router.push({name:"record_index"});
    }
    const autoPlay = () => {
        autoPlaying.value = !autoPlaying.value;

        if (autoPlaying.value){
          // 开始自动播放
          intervalId = setInterval(nextStep, 700);
        } else {
          // 停止自动播放
          clearInterval(intervalId);
          intervalId = null;
        }
    };
    onUnmounted(() => {
      clearInterval(intervalId);
    });
    return {
      player1Photo,
      player1Name,
      player1Color,
      player2Photo,
      player2Name,
      player2Color,
      isReplay,
      previousStep,
      nextStep,
      autoPlay,
      autoPlaying,
      exit
    }
  }
}
</script>

<style scoped>
.playground {
  position: relative;
  width: 80vw;
  height: 80vh;
  margin: 0px 10vw 0px 10vw;
  top:60px;
}

.player-info {
  position: absolute;
  display: flex;
  flex-direction: column; /* 垂直排列头像和名字 */
  align-items: center; /* 水平居中 */
}

.player1 {
  left: calc(20px + (10vw / 2)); /* 左下角 */
  bottom: 0px; /* 调整位置，确保不遮挡 GameMap */
}

.player2 {
  right: calc(20px + (10vw / 2)); /* 左上角 */
  top: 0px; /* 调整位置，确保不遮挡 GameMap */
}

.avatar {
  width: 10vw; /* 调整头像大小 */
  height: auto;
  border-radius: 50%; /* 圆形头像 */
}

.username {
  font-size: 24px; /* 字体大小 */
}

.controls {
  position: absolute;
  left: calc(50% - 75px); /* 居中控制按钮 */
  bottom: 30px; /* 调整位置，以避免与 GameMap 重叠 */

}

.controls button {
  margin-right:40px; /* 按钮之间的间距 */
  width: 4vw;

}
</style>
